<template>
	<view class="mainCon">
		<view class="tabHead" >
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
			<view class="btn" @click="insertCar">新增车辆</view>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="dateLabel">
							车类型 : {{ item.cartype }}
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							联系方式 : {{ item.contactsway }}
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelName">
							车号 : 
						</view>
						<view class="infoCon">
							{{ item.carcode }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							核定载重 : 
						</view>
						<view class="infoCon">
							{{ item.load }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							车辆道路运输证号 : 
						</view>
						<view class="infoCon">
							<!-- {{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }} -->
							{{ item.transportnumber }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							车货总质量限值 : 
						</view>
						<view class="infoCon">
							{{ item.totalmass }}
						</view>
					</view>
					<!-- <view class="infoCell">
						<view class="labelName">
							车辆类别 : 
						</view>
						<view class="infoCon">
							{{ item.carinfotypeid }}
						</view>
					</view> -->
					<view class="infoCell">
						<view class="labelName">
							轴型 : 
						</view>
						<view class="infoCon">
							{{ item.axialtype }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							驾驶员从业资格证号 : 
						</view>
						<view class="infoCon">
							{{ item.certificatenumber }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							驾驶员 : 
						</view>
						<view class="infoCon">
							{{ item.driver }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							道路运输经营者名称 : 
						</view>
						<view class="infoCon">
							{{ item.transportoperator }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							审核状态 : 
						</view>
						<view class="infoCon">
							{{ item.checkstatus }}
						</view>
					</view>
					<view style="display: flex; justify-content: center; margin-top: 8px;" v-if="current == 0">
						<!-- <view class="btn" @click="toMoreInfo(item)">查看</view> -->
						<view class="btn" @click="toModify(item)">修改</view>
						<view class="btn" @click="toDel(item)">删除</view>
					</view>
				</view>
			</view>
		</view>

		<view style="margin-top: 200rpx;" v-if="orderList.length === 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-popup v-model="show" width="100%" height="100%" :closeable="true">
			<view style="margin: 15px;">
				<view style="text-align: center;font-size: 20px;
						font-weight: 700;">
					{{ carContent }}
				</view>
				<u-form :model="formData" ref="uForm" label-width="280">
					<u-form-item label="车号" prop="carcode">
						<u-input v-model="formData.carcode" />
					</u-form-item>
					<u-form-item label="车类型" prop="cartype">
						<u-input  type="select" :select-open="partListShow" v-model="formData.cartype"
						 @click="partListShow = true"/>
					</u-form-item> 
					<u-form-item label="核定载重" prop="load">
						<u-input v-model="formData.load" />
					</u-form-item> 
					<u-form-item label="车辆类别" prop="carinfotypeid">
						<u-input  type="select" :select-open="carListShow" v-model="formData.carinfotype"
						 @click="carListShow = true"/>
					</u-form-item> 
					<u-form-item label="联系人" prop="contacts">
						<u-input v-model="formData.contacts" />
					</u-form-item> 
					<u-form-item label="联系方式" prop="contactsway">
						<u-input v-model="formData.contactsway" />
					</u-form-item>
					<u-form-item label="道路运输经营者名称">
						<u-input v-model="formData.transportoperator" />
					</u-form-item>
					<u-form-item label="车辆道路运输证号">
						<u-input v-model="formData.transportnumber" />
					</u-form-item>
					<u-form-item label="挂车道路运输证号">
						<u-input v-model="formData.trailernumber" />
					</u-form-item>
					<u-form-item label="轴型">
						<u-input v-model="formData.axialtype" />
					</u-form-item>
					<u-form-item label="车货总质量限值" prop="totalmass">
						<u-input v-model="formData.totalmass" />
					</u-form-item>
					<u-form-item label="驾驶员">
						<u-input v-model="formData.driver" />
					</u-form-item>
					<u-form-item label="驾驶员从业资格证号">
						<u-input v-model="formData.certificatenumber" />
					</u-form-item>
					<u-form-item label="送达地">
						<u-input v-model="formData.delivery" />
					</u-form-item>
					<u-form-item label="货物装载源头单位联系电话">
						<u-input v-model="formData.sourcetel" />
					</u-form-item>
					
				</u-form>
				
				<view class="btnGroup">
					<u-button :custom-style="customStyle" type="primary" @click="tapSubmit">提交</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="showModal" :content="content"  :title="title" :show-cancel-button="true"
			@confirm="throughConfirm" @cancel="showModal=false">
			<!-- <view style="text-align: center;">{{ content }}</view> -->
		</u-modal>
		
		<u-select mode="single-column" :list="partList" v-model="partListShow" @confirm="partListConfirm"
			value-name="value" label-name="value">
		</u-select>
		
		<u-select mode="single-column"  :list="carinfotypeList" v-model="carListShow" @confirm="carListConfirm"
			value-name="id" label-name="cartypename">
		</u-select>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
					width: '200rpx'
				},
				tabList: ["待审核", "已通过", "未通过"],
				current: 0, 
				orderList: [],
				tel: "",
				flag: false,
				show: false,
				partListShow: false,
				carListShow: false,
				partList: [
					{ value: '微型货车(<1.8吨)' },
					{ value: '轻型货车(1.8-6吨)' },
					{ value: '中型货车(6-14吨)' },
					{ value: '重型货车(>14吨)' },
				],
				carinfotypeList: [],	// 车辆类别list
				carContent: '',
				formData: {
					contactsway: uni.getStorageSync("userInfo").mobile,
					creator: uni.getStorageSync("userInfo").nickName,			// 创建人
					carcode: '',
					cartype: '',
					load: '',
					carinfotypeid: '',
					contacts: '',
					transportoperator: '',
					transportnumber: '',
					trailernumber: '',
					axialtype: '',
					totalmass: '',
					driver: '',
					certificatenumber: '',
					delivery: '',
					sourcetel: ''
				},			// 	新增表单
				showModal: false,
				title: '',
				objInfo: {},
				content: '',
				rules: {
					carcode: [ { required: true, message: '车号不能为空' } ],
					cartype: [ { required: true, message: '车类型不能为空' } ],
					load: [ { required: true, message: '核定载重不能为空' } ],
					carinfotypeid: [ { required: true, message: '车辆类别不能为空' } ],
					contacts: [ { required: true, message: '联系人不能为空' } ],
					contactsway: [ { required: true, message: '联系方式不能为空' } ],
					totalmass: [ { required: true, message: '车辆总质量限制不能为空' } ]
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			//uni.getStorageSync("userInfo").mobile 15857953322
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getState1()
			this.getCarinfotypeid()
		},
		methods: {
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1()		// 待审核0
				} 
				if (index == 1) {
					this.getState3()		// 已通过2
				}
				if (index == 2) {
					this.getState2()		// 已拒绝1
				}
			},
			// 车辆类别选择
			getCarinfotypeid() {
				uni.request({
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/yTPXFPc1EsPGSSy',
					// url: 'http://192.168.10.105:8084/zlzg/Q/H7D11Pg09OJQ7xq',
					method: "post",
					success: (res) => {
						console.log(res.data)
						this.carinfotypeList = res.data.rows
					}
				})
			},
			setList(status) {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// https://api.zlkj-port.com/cygjapi
					// url: 'http://192.168.10.105:8084/zlzg/Q/mN3OAXIrz2xHvHN?contactsway=' + this.tel + '&checkstatus=' + status,
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/xu8bDZaDK8P44os?contactsway=' + this.tel + '&checkstatus=' + status,
					method: "post",
					success: (res) => {
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.checkstatus == 0 ) {
								item.checkstatus = '待审核'
							} 
							if ( item.checkstatus == 2 ) {
								item.checkstatus = '已通过'
							}
							if ( item.checkstatus == 1 ) {
								item.checkstatus = '已回绝'
							}
							return item
						})
						uni.hideLoading()
					}
				})
			},
			// 待审核
			getState1() {
				this.setList(0)
			},
			// 拒绝
			getState2() {
				this.setList(1)
			},
			// 通过
			getState3() {
				this.setList(2)
			},
			partListConfirm(val) {
				this.formData.cartype = val[0].value
				console.log(this.formData.cartype)
			},
			carListConfirm(val) {
				console.log(val)
				this.formData.carinfotype = val[0].label
				this.formData.carinfotypeid = val[0].value
				console.log(this.formData.carinfotypeid)
			},
			// 新增
			insertCar() {
				this.carContent = '新增车辆信息'
				this.show = true
				this.formData = {
					contactsway: uni.getStorageSync("userInfo").mobile,
					creator: uni.getStorageSync("userInfo").nickName,			// 创建人
					carcode: '',
					cartype: '',
					load: '',
					carinfotype: '',
					carinfotypeid: '',
					contacts: '',
					transportoperator: '',
					transportnumber: '',
					trailernumber: '',
					axialtype: '',
					totalmass: '',
					driver: '',
					certificatenumber: '',
					delivery: '',
					sourcetel: ''
				}
			},
			// 提交
			tapSubmit() {
				this.$refs.uForm.validate(valid => {
					if(valid) {
						uni.request({
							url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/UoM6ed1U1P8AMUl?carcode=' + this.formData.carcode,
							method: 'post',
							success: (res) => {
								console.log(res)
								if (res.data.rows.length == 0) {
									// 新增
									uni.request({
										// dM5AfYB7iJZeOwz
										url: 'https://api.zlkj-port.com/cyapi/zlzg/A/dM5AfYB7iJZeOwz?carcode=' + this.formData.carcode +
										// url: 'http://192.168.10.105:8084/zlzg/A/BM3QIG6nE9OTMDy?carcode=' + this.formData.carcode +
										'&creator=' + this.formData.creator + '&cartype=' + this.formData.cartype +
										'&load=' + this.formData.load + '&carinfotypeid=' + this.formData.carinfotypeid +
										'&contacts=' + this.formData.contacts + '&contactsway=' + this.formData.contactsway +
										'&transportoperator=' + this.formData.transportoperator + '&transportnumber=' + this.formData.transportnumber +
										'&trailernumber=' + this.formData.trailernumber + '&axialtype=' + this.formData.axialtype +
										'&totalmass=' + this.formData.totalmass + '&driver=' + this.formData.driver +
										'&certificatenumber=' + this.formData.certificatenumber +
										'&delivery=' + this.formData.delivery + '&sourcetel=' + this.formData.sourcetel,
										method: 'post',
										success: (res) => {
											console.log(res)
											this.formData = {
												contactsway: uni.getStorageSync("userInfo").mobile,
												creator: uni.getStorageSync("userInfo").nickName,			// 创建人
												carcode: '',
												cartype: '',
												load: '',
												carinfotype: '',
												carinfotypeid: '',
												contacts: '',
												transportoperator: '',
												transportnumber: '',
												trailernumber: '',
												axialtype: '',
												totalmass: '',
												driver: '',
												certificatenumber: '',
												delivery: '',
												sourcetel: ''
											},
											this.getState1()
											this.show = false
											this.$refs.uTips.show({
												title: '新增成功！',
												type: 'success',
												duration: '2500'
											})
										}
									})
								} else {
									// 修改
									uni.request({
										
										url: 'https://api.zlkj-port.com/cyapi/zlzg/U/WtDQvDGACHEtB0z?carcode=' + this.formData.carcode +
										// url: 'http://192.168.10.105:8084/zlzg/U/wyr4RGkm1gQ14iu?carcode=' + this.formData.carcode +
										'&creator=' + this.formData.creator + '&cartype=' + this.formData.cartype +
										'&load=' + this.formData.load + '&carinfotypeid=' + this.formData.carinfotypeid +
										'&contacts=' + this.formData.contacts + '&contactsway=' + this.formData.contactsway +
										'&transportoperator=' + this.formData.transportoperator + '&transportnumber=' + this.formData.transportnumber +
										'&trailernumber=' + this.formData.trailernumber + '&axialtype=' + this.formData.axialtype +
										'&totalmass=' + this.formData.totalmass + '&driver=' + this.formData.driver +
										'&certificatenumber=' + this.formData.certificatenumber +
										'&delivery=' + this.formData.delivery + '&sourcetel=' + this.formData.sourcetel + 
										'&id=' + res.data.rows[0].id,
										method: 'post',
										success: (res) => {
											console.log(res)
											this.formData = {
												contactsway: uni.getStorageSync("userInfo").mobile,
												creator: uni.getStorageSync("userInfo").nickName,			// 创建人
												carcode: '',
												cartype: '',
												load: '',
												carinfotype: '',
												carinfotypeid: '',
												contacts: '',
												transportoperator: '',
												transportnumber: '',
												trailernumber: '',
												axialtype: '',
												totalmass: '',
												driver: '',
												certificatenumber: '',
												delivery: '',
												sourcetel: ''
											},
											this.getState1()
											this.show = false
											this.$refs.uTips.show({
												title: '覆盖成功！',
												type: 'success',
												duration: '2500'
											})
										}
									})
								}
								
							}
						})
					}
				})
			},
			// 查看详细
			toMoreInfo(item) {
				
			},
			// 修改
			toModify(item) {
				this.carContent = '修改车辆信息'
				uni.request({
					
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/GozfwxxIHxzVkI0?id=' + item.id,
					// url: 'http://192.168.10.105:8084/zlzg/Q/ktWPklwzMV8P2be?id=' + item.id,
					method: 'post',
					success: (res) => {
						this.formData = res.data.rows[0]
						let obj = this.carinfotypeList.find(val => {
							return res.data.rows[0].carinfotypeid == val.id
						})
						this.formData.carinfotype = obj.cartypename
						console.log(obj)
						console.log(this.formData.carinfotypeid)
						this.show = true
					}
				})
			},
			// 删除
			toDel(item) {
				this.objInfo = item
				this.title = '确定要删除吗？'
				this.showModal = true
			},
			throughConfirm() {
				uni.request({
					// url: 'http://192.168.10.105:8084/zlzg/U/FiD80ioqHiHNijc?id=' + this.objInfo.id,
					url: 'https://api.zlkj-port.com/cyapi/zlzg/U/JJ6xVEX05oLXOEv?id=' + this.objInfo.id,
					method: 'post',
					success: (res) => {
						this.showModal = false
						this.$refs.uTips.show({
							title: '删除成功！',
							type: 'success',
							duration: '2500'
						})
						this.getState1()
					}
				})
			}
			
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.btn {
		background-color: rgb(25, 190, 107); 
		color: #fff; 
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 5px;
		margin-left: 10px;
	}
	.btnGroup {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 15rpx;
	}
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #858585;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 280rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
